<template>
  <view class="page">
    <CommonNavbar
      title="选择我的学生"
      :showBack="true"
    ></CommonNavbar>
    <view class="main">
      <view class="margin-tb">
        <up-search
          placeholder="输入学生芽号"
          v-model="state.searchWord"
          :showAction="false"
          @search="handleSearch"
        ></up-search>
      </view>
      <up-tabs
        :list="state.tabsList"
        :scrollable="false"
        lineColor="#6D9319"
        @click="handleTabs"
      ></up-tabs>

      <!-- 我的学生列表 -->
      <!-- <view v-if="state.currentTab === 1">
        <view class="student-grid">
          <view
            v-for="(student, index) in state.studentList"
            :key="index"
            class="student-item"
          >
            <image
              :src="student.avatar"
              mode="widthFix"
              class="student-avatar"
            />
            <view class="student-info">
              <view class="flex-sub">
                <up-text
                  color="white"
                  size="14"
                  :text="student.name"
                ></up-text>
                <up-text
                  color="white"
                  size="9"
                  :text="student.num"
                  margin="6rpx 0 0 0"
                ></up-text>
              </view>
              <view class="cus-btn">选择</view>
            </view>
          </view>
        </view>
      </view> -->

      <!-- 班级群列表 -->
      <view class="class-list">
        <view
          v-for="(classItem, index) in state.classList"
          :key="index"
          class="flex justify-between align-center u-border-bottom padding-tb"
        >
          <up-text
            size="12"
            color="#000"
            :text="classItem.className"
          ></up-text>
          <up-button
            type="primary"
            size="mini"
            text="进入"
            shape="circle"
            @click="handleEnterClass(classItem.classCode)"
            customStyle="width:64px !important;height:32px !important;font-size:14px !important"
          ></up-button>
        </view>
      </view>
    </view>
    <view class="footer">
      <up-button
        type="primary"
        text="创建班级"
        @click="handleCreateClass"
      ></up-button>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { searchByShowIdApi } from '@/api/me';
import { getClassListApi } from '@/api/classes';
import { onLoad } from '@dcloudio/uni-app';
const state = reactive({
  currentTab: 0,
  searchWord: '',
  tabsList: [{ name: '班级群' }],
  studentList: [
    {
      name: '夏子琪',
      num: '2120022',
      avatar:
        'https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg'
    },
    {
      name: '夏子琪',
      num: '2120022',
      avatar:
        'https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg'
    },
    {
      name: '夏子琪',
      num: '2120022',
      avatar:
        'https://img12.360buyimg.com/n7/jfs/t1/102191/19/9072/330688/5e0af7cfE17698872/c91c00d713bf729a.jpg'
    }
  ],
  classList: [
    {
      name: '三年级(1)班'
    },
    {
      name: '三年级(1)班'
    },
    {
      name: '三年级(1)班'
    },
    {
      name: '三年级(1)班'
    }
  ]
});

onLoad(() => {
  getClassList();
});

// 班级列表
const getClassList = async () => {
  const result = await getClassListApi();
  if (result.code === 200) {
    state.classList = result.data;
  } else {
    uni.$u.toast(result.msg);
  }
};

// 创建班级
const handleCreateClass = () => {
  uni.navigateTo({
    url: '/pages-sub/teacher/createClass'
  });
};
//切换tabs
const handleTabs = (item) => {
  state.currentTab = item;
};

// 进入班级
const handleEnterClass = (classCode) => {
  uni.navigateTo({
    url: `/pages-sub/teacher/classDetail?id=${classCode}`
  });
};

const handleSearch = async () => {
  const params = {
    showId: state.searchWord
  };
  const result = await searchByShowIdApi(params);
  if (result.code === 200) {
    console.log('result', result);
  } else {
    uni.showToast({
      title: result.msg,
      icon: 'none'
    });
  }
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #fff;
}

.student-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-top: 20rpx;
  .student-item {
    position: relative;
    background: #f8f9f3;
    border-radius: 20rpx;
    align-items: center;
    border: solid 1px #8db82e;
    overflow: hidden;
    .student-avatar {
      width: 100%;
      height: 100%;
    }

    .student-info {
      display: flex;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background: #9cb95a;
      justify-content: space-between;
      align-items: center;
      padding: 10rpx 18rpx;
      box-sizing: border-box;

      .cus-btn {
        width: 104rpx !important;
        height: 34rpx !important;
        line-height: 34rpx;
        color: black;
        border-radius: 100rpx;
        text-align: center;
        font-size: 18rpx;
        background: linear-gradient(
          96.96deg,
          #d4e9a2 0%,
          rgba(184, 211, 122, 0.8) 18.41%,
          rgba(210, 233, 158, 0.9) 42.07%,
          rgba(201, 236, 124, 0.9) 67.49%,
          #e9ffb8 85.9%
        );
      }
    }
  }
}

.class-list {
  padding-top: 20rpx;

  .class-item {
    padding: 30rpx 0;
    border-bottom: 1rpx solid #eeeeee;

    .class-info {
      font-size: 28rpx;
      color: #333;

      .class-count {
        color: #999;
        margin-left: 10rpx;
      }
    }
  }
}
</style>
